<template>
	<view class="">
		<u-modal :show="show"  :title="title" :showCancelButton="showCancelButton" @cancel="cancel" @confirm="confirm">
			<view class="slot-content">
				<view class="fz26 color999 mb15">
					{{ content }}
				</view>
				<input type="password" v-model="contentText" placeholder="输入支付密码" class="modal-input" />
				
			</view>
		</u-modal>
	</view>
</template>

<script lang="ts">
import { defineComponent, ref, } from 'vue' 

export default defineComponent({
	props: {
		count:  {
			type: Number,
			default: 1
		},
		title:  {
			type: String,
			default: '输入支付密码'
		},
		content:  {
			type: String,
			default: ''
		},
		showCancelButton: {
			type: Boolean,
			default: true
		}, 
	},
	setup(attr, ctx) {
		const show = ref(false)
		const contentText = ref('')
		
		const confirm = () => { 
			ctx.emit('confirmModal', contentText.value)
		}
		
		const cancel = () => {
			show.value = false
			contentText.value = ''
			ctx.emit('cancelModal', contentText.value)
		};
		const showModal = () => show.value = true;
		
		return {
			show,
			contentText,
			confirm,
			cancel,
			showModal
		}
	}
})
	
</script>

<style lang="scss" scoped>
.slot-content{
	padding: 20rpx;
}
.modal-input{
	width: 400rpx;
	height: 50rpx;
	background-color: #f0f0f0;
	padding: 12rpx;
	text-align: center;
	font-size: 32rpx
}
</style>